<template>
  <div class="activity-list csj-common f14">
    <!-- 头部区域 -->
    <div class="csj-common-title">
      <div class="f16">运营管理 / 活动管理</div>
      <div class="ml20">
        <i-button type="primary" class="wpx150" @click="isAdd = true"
          >添加活动</i-button
        >
      </div>
    </div>
    <!-- 表格 -->
    <div class="csj-table">
      <div class="csj-table-content">
        <template>
          <Table border :columns="columns" :data="showData">
            <template slot-scope="{ row }" slot="id">
              <div>1</div>
            </template>
            <template slot-scope="{ row }" slot="name">
              <div>云仓活动</div>
            </template>
            <!-- 活动背景图 -->
            <template slot-scope="{ row }" slot="img">
              <div>
                <img src="#" />
              </div>
            </template>
            <!-- 活动链接 -->
            <template slot-scope="{ row }" slot="url">
              <a href="www.baidu.com">111</a>
            </template>
            <template slot-scope="{ row }" slot="data">
              <div>2020-12-24</div>
            </template>
            <template slot-scope="{ row }" slot="time">
              <div>2020-12-25</div>
            </template>
            <template slot-scope="{ row }" slot="zt">
              <div>进行中</div>
            </template>
            <template slot-scope="{ row }" slot="action">
              <div style="color: #169bd5" class="cup zt-t">
                <span class="cup" @click="openDetails(1)">详情</span>
                <span class="cup" @click="openEdit(row.id)">编辑</span>
                <span class="cup cred" @click="openDelete(row.id)">删除</span>
              </div>
              <div style="color: #169bd5" class="cup zt-b">
                <span class="cup" @click="openCommoditManage(row.id)"
                  >商品管理</span
                >
                <span class="cup" @click="openCouponManage(row.id)"
                  >优惠卷管理</span
                >
                <span class="cup" @click="openLableManage(row.id)"
                  >标签管理</span
                >
              </div>
            </template>
          </Table>
          <!-- 分页 -->
          <div class="lh80">
            <Page
              :total="count"
              :page-size="pageSize"
              @on-change="changePage"
              @on-page-size-change="changePageSize"
              :current="page"
              show-elevator
              show-total
              show-sizer
            ></Page>
          </div>
        </template>
        <!-- 添加活动 -->
        <activity-add
          v-if="isAdd"
          @close="isAdd = false"
          @confirm="digAdd()"
        ></activity-add>
        <!-- 活动编辑-->
        <activity-edit
          v-if="isEdit"
          :id="editId"
          @close="isEdit = false"
          @confirm="digEdit()"
        ></activity-edit>
        <!-- 活动详情 -->
        <activity-detail
          v-if="isDetail"
          :id="detailId"
          @close="isDetail = false"
        ></activity-detail>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./activity-list.ts"></script>
